<template>
    <div id="course-template">
        <div class="btn-group fr">
            <el-button class="button-style" @click="Delete">解除镜像</el-button>
            <el-button class="button-style" @click="Distribution">分配镜像</el-button>
        </div>
        <el-table :data="tableData" style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="100"></el-table-column>
            <el-table-column prop="chapterName" label="章节/任务名称"></el-table-column>
            <el-table-column prop="imageName" label="镜像/集群名称"></el-table-column>
            <el-table-column label="类型">
                <template slot-scope="scope">
                    <span v-if="scope.row.mode == 1">单节点</span>
                    <span v-else-if="scope.row.mode == 2">集群</span>
                </template>
            </el-table-column>
            <el-table-column prop="flavor" label="配置上限"></el-table-column>
            <el-table-column prop="imageSource" label="镜像来源"></el-table-column>
        </el-table>
        <el-dialog :close-on-click-modal="false" class="dialog-distribution" title="分配镜像" :visible.sync="dialogDistributionFormVisible"  label-width="100px" width="830px">
            <el-form :model="distributionform" ref="distributionform">
                <el-form-item class="is-required" label="实验类型：">
                    <el-radio-group v-model="distributionform.experimentType" @change="experimentTypeChange">
                        <el-radio :label="1">可视化实验</el-radio>
                        <el-radio :label="2">NoteBook实验</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item class="is-required" label="配置类型：" v-if="distributionform.experimentType == 1">
                    <el-radio-group v-model="distributionform.resource">
                        <el-radio :label="1">单节点</el-radio>
                        <el-radio :label="2">集群</el-radio>
                    </el-radio-group>
                </el-form-item>
                <template v-if="distributionform.experimentType == 2">
                    <el-form-item class="config-item">
                        <div class="fl item-config">
                            <el-form-item
                                prop="distributedData.cpuValue"
                                :rules="{
                                    required: true, message: '请选择CPU上限', trigger: 'blur'
                                }"
                                label="配置："
                                style=" float:left; width:210px;"
                                class="item-cpu">
                                <el-select v-model="distributionform.distributedData.cpuValue" value-key="value" placeholder="CPU上限">
                                    <el-option
                                    v-for="item in distributionform.distributedData.cpuOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item
                                prop="distributedData.ramValue"
                                :rules="{
                                    required: true, message: '请选择内存上限', trigger: 'blur'
                                }"
                                style="width:110px; float:left; margin-left:10px;">
                                <el-select v-model="distributionform.distributedData.ramValue" placeholder="内存上限">
                                    <el-option
                                    v-for="item in distributionform.distributedData.ramOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-form-item>
                    <el-form-item class="is-required" label="镜像：">
                        <el-cascader
                            :options="distributionform.options0"
                            v-model="distributionform.optionsValue0"
                            :show-all-levels="false"
                            @change="handleItemChange"
                        ></el-cascader>
                    </el-form-item>
                </template>
                <template v-if="distributionform.experimentType == 1">
                    <div class="form-title">{{ distributionform.resource == 1 ? '伪分布' : '主节点'}}</div>
                    <!-- 伪分布 -->
                    <el-form-item class="config-item" v-if="distributionform.resource == 1">
                        <div class="fl item-config">
                            <el-form-item
                                prop="distributedData.cpuValue"
                                :rules="{
                                    required: true, message: '请选择CPU上限', trigger: 'blur'
                                }"
                                label="配置："
                                style=" float:left; width:210px;"
                                class="item-cpu">
                                <el-select v-model="distributionform.distributedData.cpuValue" value-key="value" placeholder="CPU上限">
                                    <el-option
                                    v-for="item in distributionform.distributedData.cpuOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item
                                prop="distributedData.ramValue"
                                :rules="{
                                    required: true, message: '请选择内存上限', trigger: 'blur'
                                }"
                                style="width:110px; float:left; margin-left:10px;">
                                <el-select v-model="distributionform.distributedData.ramValue" placeholder="内存上限">
                                    <el-option
                                    v-for="item in distributionform.distributedData.ramOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <!-- <el-form-item class="fl item-Gpu" label="GPU">
                            <el-switch
                                v-model="distributionform.distributedData.switchValue">
                            </el-switch>
                        </el-form-item> -->
                    </el-form-item>
                    <el-form-item class="is-required" label="镜像：" v-if="distributionform.resource == 1">
                        <el-cascader
                            :options="distributionform.options0"
                            v-model="distributionform.optionsValue0"
                            :show-all-levels="false"
                            @change="handleItemChange"
                        ></el-cascader>
                    </el-form-item>
                    <!-- 伪分布end -->
                    <!-- 主节点 -->
                    <el-form-item class="config-item" v-if="distributionform.resource == 2">
                        <div class="fl item-config">
                            <el-form-item
                                prop="nodeMianData.cpuValue"
                                :rules="{
                                    required: true, message: '请选择CPU上限', trigger: 'blur'
                                }"
                                label="配置："
                                style=" float:left; width:210px;"
                                class="item-cpu">
                                <el-select v-model="distributionform.nodeMianData.cpuValue" value-key="value" placeholder="CPU上限">
                                    <el-option
                                    v-for="item in distributionform.nodeMianData.cpuOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item
                                prop="nodeMianData.ramValue"
                                :rules="{
                                    required: true, message: '请选择内存上限', trigger: 'blur'
                                }"
                                style="width:110px; float:left; margin-left:10px;">
                                <el-select v-model="distributionform.nodeMianData.ramValue" placeholder="内存上限">
                                    <el-option
                                    v-for="item in distributionform.nodeMianData.ramOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <!-- <el-form-item class="fl item-Gpu" label="GPU">
                            <el-switch
                                v-model="distributionform.nodeMianData.switchValue">
                            </el-switch>
                        </el-form-item> -->
                    </el-form-item>
                    <el-form-item class="is-required" label="镜像："v-if="distributionform.resource == 2">
                        <el-cascader
                            :options="distributionform.options7"
                            v-model="distributionform.optionsValue7"
                            :show-all-levels="false"
                            @change="handleItemChange"
                        ></el-cascader>
                    </el-form-item>
                    <!-- 伪分布end -->
                    <div class="form-title" v-if="distributionform.resource == 2">从节点</div>
                    <!-- 镜像配置 -->
                    <el-form-item class="config-item" v-if="distributionform.resource == 2">
                        <div class="fl item-config">
                            <el-form-item
                                prop="mirrorConfigData.cpuValue"
                                :rules="{
                                    required: true, message: '请选择CPU上限', trigger: 'blur'
                                }"
                                label="配置："
                                style=" float:left; width:210px;"
                                class="item-cpu">
                                <el-select v-model="distributionform.mirrorConfigData.cpuValue" value-key="value" placeholder="CPU上限">
                                    <el-option
                                    v-for="item in distributionform.mirrorConfigData.cpuOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item
                                prop="mirrorConfigData.ramValue"
                                :rules="{
                                    required: true, message: '请选择内存上限', trigger: 'blur'
                                }"
                                style="width:110px; float:left; margin-left:10px;">
                                <el-select v-model="distributionform.mirrorConfigData.ramValue" placeholder="内存上限">
                                    <el-option
                                    v-for="item in distributionform.mirrorConfigData.ramOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <!-- <el-form-item class="fl item-Gpu" label="GPU">
                            <el-switch
                                v-model="distributionform.mirrorConfigData.switchValue">
                            </el-switch>
                        </el-form-item> -->
                    </el-form-item>
                    <!-- 镜像配置 -->
                    <el-form-item v-if="distributionform.resource == 2" label="从节点数：">
                        <div class="virtual-step">
                            <ul>
                                <!-- <li v-for="(item, index) in distributionform.virtualStepList" @click="AddClass(((index+1)*2))" :class="{ active:((index+1)*2) == distributionform.virtualStepCurrent, 'active-disabled': index != 0}">{{item.value}}</li> -->
                                <li v-for="(item, index) in distributionform.virtualStepList" @click="AddClass(((index+1)))" :class="{ active:((index+1)) == distributionform.virtualStepCurrent}">{{item.value}}</li>
                            </ul>
                        </div>
                    </el-form-item>
                    <div class="item-node" v-if="distributionform.resource == 2">
                        <el-form-item class="is-required" label="镜像1：" v-if="distributionform.virtualStepCurrent == 1 || distributionform.virtualStepCurrent == 2 ||distributionform.virtualStepCurrent == 4 || distributionform.virtualStepCurrent == 6">
                            <el-cascader
                                :options="distributionform.options1"
                                v-model="distributionform.optionsValue1"
                                :show-all-levels="false"
                                @change="handleItemChange"
                            ></el-cascader>
                        </el-form-item>
                        <el-form-item class="is-required" label="镜像2：" v-if="distributionform.virtualStepCurrent == 2 ||distributionform.virtualStepCurrent == 4 || distributionform.virtualStepCurrent == 6">
                            <el-cascader
                                :options="distributionform.options2"
                                v-model="distributionform.optionsValue2"
                                :show-all-levels="false"
                                @change="handleItemChange"
                            ></el-cascader>
                        </el-form-item>
                        <el-form-item class="is-required" label="镜像3：" v-if="distributionform.virtualStepCurrent == 4 || distributionform.virtualStepCurrent == 6">
                            <el-cascader
                                :options="distributionform.options3"
                                v-model="distributionform.optionsValue3"
                                :show-all-levels="false"
                                @change="handleItemChange"
                            ></el-cascader>
                        </el-form-item>
                        <el-form-item class="is-required" label="镜像4：" v-if="distributionform.virtualStepCurrent == 4 || distributionform.virtualStepCurrent == 6">
                            <el-cascader
                                :options="distributionform.options4"
                                v-model="distributionform.optionsValue4"
                                :show-all-levels="false"
                                @change="handleItemChange"
                            ></el-cascader>
                        </el-form-item>
                        <el-form-item class="is-required" label="镜像5：" v-if="distributionform.virtualStepCurrent == 6">
                            <el-cascader
                                :options="distributionform.options5"
                                v-model="distributionform.optionsValue5"
                                :show-all-levels="false"
                                @change="handleItemChange"
                            ></el-cascader>
                        </el-form-item>
                        <el-form-item class="is-required" label="镜像6：" v-if="distributionform.virtualStepCurrent == 6">
                            <el-cascader
                                :options="distributionform.options6"
                                v-model="distributionform.optionsValue6"
                                :show-all-levels="false"
                                @change="handleItemChange"
                            ></el-cascader>
                        </el-form-item>
                    </div>
                </template>
            </el-form>
            <div class="distribution-item" v-if="distributionform.distributionData">
                <div class="jx-course-box">
                    <img :src="distributionform.distributionData.iconUrl" />
                    <span v-text="distributionform.distributionData.imageName"></span>
                </div>
                <div class="jx-course-text" v-text="distributionform.distributionData.description"></div>
                <div class="jx-course-icon" v-if="distributionform.distributionData.gpu">
                    <img src="./../../../assets/images/gpu_icon.png" />
                </div>
                <div class="jx-course-icon" v-if="distributionform.distributionData.notebook">
                    <img src="./../../../assets/images/notebook_icon.png" />
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button class="button-style" @click="DistributionFormSave('distributionform', 1)">保 存</el-button>
                <!-- <el-button class="button-style" @click="DistributionFormSave('distributionform', 2)">修改实验镜像</el-button> -->
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    export default {
        components: {
            swiper,
            swiperSlide
        },
        data () {
            return {
                // 课程ID
                coursesId: '',
                // 表格数据
                tableData: [],
                currentPage: 1,
                pagesize: 10,
                totalCount: 1000,
                multipleSelection: [],

                //分配镜像弹窗
                dialogDistributionFormVisible: false,
                distributionform: {
                    // 类型
                    resource: 1,
                    // 实验类型 1 可视化实验 2 notebook实验
                    experimentType:1,
                    // 伪分布数组
                    distributedData: {
                        // cpu配置
                        cpuOptions: [
                            {
                                value: '1',
                                label: '1核'
                            },
                            {
                                value: '2',
                                label: '2核'
                            },
                            {
                                value: '4',
                                label: '4核'
                            },
                            {
                                value: '6',
                                label: '6核'
                            },
                            {
                                value: '8',
                                label: '8核'
                            },
                            {
                                value: '10',
                                label: '10核'
                            }
                        ],
                        cpuValue: '',
                        ramOptions: [
                            {
                                value: '1',
                                label: '1G'
                            },
                            {
                                value: '2',
                                label: '2G'
                            },
                            {
                                value: '4',
                                label: '4G'
                            },
                            {
                                value: '6',
                                label: '6G'
                            },
                            {
                                value: '8',
                                label: '8G'
                            },
                            {
                                value: '10',
                                label: '10G'
                            },
                            {
                                value: '12',
                                label: '12G'
                            },
                            {
                                value: '14',
                                label: '14G'
                            },
                            {
                                value: '16',
                                label: '16G'
                            },
                            {
                                value: '32',
                                label: '32G'
                            },
                            {
                                value: '48',
                                label: '48G'
                            },
                            {
                                value: '64',
                                label: '64G'
                            }
                        ],
                        ramValue: '',
                        // GPU
                        // switchValue: false
                    },
                    // 镜像配置
                    mirrorConfigData: {
                        // cpu配置
                        cpuOptions: [
                            {
                                value: '1',
                                label: '1核'
                            },
                            {
                                value: '2',
                                label: '2核'
                            },
                            {
                                value: '4',
                                label: '4核'
                            },
                            {
                                value: '6',
                                label: '6核'
                            },
                            {
                                value: '8',
                                label: '8核'
                            },
                            {
                                value: '10',
                                label: '10核'
                            }
                        ],
                        cpuValue: '',
                        ramOptions: [
                            {
                                value: '1',
                                label: '1G'
                            },
                            {
                                value: '2',
                                label: '2G'
                            },
                            {
                                value: '4',
                                label: '4G'
                            },
                            {
                                value: '6',
                                label: '6G'
                            },
                            {
                                value: '8',
                                label: '8G'
                            },
                            {
                                value: '10',
                                label: '10G'
                            },
                            {
                                value: '12',
                                label: '12G'
                            },
                            {
                                value: '14',
                                label: '14G'
                            },
                            {
                                value: '16',
                                label: '16G'
                            },
                            {
                                value: '32',
                                label: '32G'
                            },
                            {
                                value: '48',
                                label: '48G'
                            },
                            {
                                value: '64',
                                label: '64G'
                            }
                        ],
                        ramValue: '',
                        // GPU
                        switchValue: false
                    },
                    // 主节点
                    nodeMianData: {
                        // cpu配置
                        cpuOptions: [
                            {
                                value: '1',
                                label: '1核'
                            },
                            {
                                value: '2',
                                label: '2核'
                            },
                            {
                                value: '4',
                                label: '4核'
                            },
                            {
                                value: '6',
                                label: '6核'
                            },
                            {
                                value: '8',
                                label: '8核'
                            },
                            {
                                value: '10',
                                label: '10核'
                            }
                        ],
                        cpuValue: '',
                        ramOptions: [
                            {
                                value: '1',
                                label: '1G'
                            },
                            {
                                value: '2',
                                label: '2G'
                            },
                            {
                                value: '4',
                                label: '4G'
                            },
                            {
                                value: '6',
                                label: '6G'
                            },
                            {
                                value: '8',
                                label: '8G'
                            },
                            {
                                value: '10',
                                label: '10G'
                            },
                            {
                                value: '12',
                                label: '12G'
                            },
                            {
                                value: '14',
                                label: '14G'
                            },
                            {
                                value: '16',
                                label: '16G'
                            },
                            {
                                value: '32',
                                label: '32G'
                            },
                            {
                                value: '48',
                                label: '48G'
                            },
                            {
                                value: '64',
                                label: '64G'
                            }
                        ],
                        ramValue: '',
                        // GPU
                        // switchValue: false
                    },
                    options0: [
                    ],
                    optionsValue0: [],
                    options1: [],
                    optionsValue1: [],
                    options2: [],
                    optionsValue2: [],
                    options3: [],
                    optionsValue3: [],
                    options4: [],
                    optionsValue4: [],
                    options5: [],
                    optionsValue5: [],
                    options6: [],
                    optionsValue6: [],
                    options7: [],
                    optionsValue7: [],
                    virtualStepList: [
                        { value: 1 },
                        { value: 2 }
                    ],
                    virtualStepCurrent: 1,
                    // 镜像列表数据
                    distributionData: ''
                }
            }
        },
        created () {
            let self = this
            // 课程ID
            self.coursesId = self.$localstorage.getLocalStorage('setCourseId')
            // 初始化列表
            self.InitList()
            // 初始化判断课程Nav
            self.initNav()
        },
        methods: {
            // 初始化判断课程Nav
            initNav(){
                let self = this
                self.$http.get('/tes/course/'+ self.coursesId+'/chapter/list/owner').then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        if(res.data.length > 0){
                            //已经有章节,判断导航显示
                            self.$parent.$parent.mark = false
                            self.$parent.$parent.chaperFlag = false
                        }else{
                            self.$parent.$parent.mark = true
                            self.$parent.$parent.chaperFlag = false
                        }
                    }else if(res.code == '404'){
                        //暂无章节,判断导航显隐藏
                        self.$parent.$parent.mark = true
                        self.$parent.$parent.chaperFlag = false

                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    self.$message.error(res.message)
                })
            },
            // 初始化列表
            InitList() {
                let self = this
                self.$http.get('/tes/image-allocation/course/'+self.coursesId).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        // 表格数据
                        self.tableData = res.data
                        // self.totalCount = res.data.length
                        //已经有章节,判断导航显示
                        self.$parent.mark = false
                        self.$parent.chaperFlag = false
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            handleSelectionChange(val) {
                let valArr = []
                for(let i = 0; i < val.length; i++){
                    valArr.push(val[i].chapterId)
                }
                this.multipleSelection = valArr;
            },
            //分页
			handleSizeChange: function (size) {
				this.pagesize = size;
			},
			handleCurrentChange: function(currentPage) {
                this.currentPage = currentPage
                this.InitList()
            },
            // 解除镜像
            Delete() {
                let self = this
                // 判断是否选中
                if(self.multipleSelection.length == 0){
                    self.$message({
                        message: '请选择要解除的章节',
                        type: 'warning'
                    })
					return
                }
                self.$confirm('确定解除选中章节的镜像吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
                    self.$http.post('/tes/image-allocation/course/delete', self.multipleSelection).then(response => {
                        let res = response.data
                        if(res.code == '200'){
                            self.$message({
                                message: '解除成功',
                                type: 'success'
                            })
							self.InitList()
                        }else{
                            self.$message.error(res.message)
                        }
                    }).catch(err => {
                        console.log(err)
                    })
                }).catch(() => {
				})
            },
            //弹窗step切换
            AddClass(index){
                let self = this
                // if(index != 2){
                //     return
                // }
                self.distributionform.virtualStepCurrent = index
            },
             // 选择实验类型
            experimentTypeChange(e) {
                this.distributionform.resource = 1
                this.distributionform.distributedData.cpuValue = ''
                this.distributionform.distributedData.ramValue = ''
                // this.distributionform.distributedData.switchValue = false
                this.distributionform.mirrorConfigData.cpuValue = ''
                this.distributionform.mirrorConfigData.ramValue = ''
                this.distributionform.mirrorConfigData.switchValue = false
                this.distributionform.nodeMianData.cpuValue = ''
                this.distributionform.nodeMianData.ramValue = ''
                this.distributionform.optionsValue0 = [];
                this.distributionform.optionsValue1 = [];
                this.distributionform.optionsValue2 = [];
                this.distributionform.optionsValue3 = [];
                this.distributionform.optionsValue4 = [];
                this.distributionform.optionsValue5 = [];
                this.distributionform.optionsValue6 = [];
                this.distributionform.optionsValue7 = [];
                this.distributionform.virtualStepCurrent = 1;
                this.distributionform.distributionData = '';
                let type = e==1 ? false : true;
                this.getImageList(type);
            },
             // 查询NoteBook镜像列表
            getImageList(isNotebook) {
                 this.$http.get('/tes/image-allocation/image?cluster=false&notebook='+isNotebook ).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        this.distributionform.options0 = res.data
                    }else{
                        this.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 分配镜像
            Distribution() {
                let self = this
                // self.distributionform.resource = 1
                // 判断是否选中
                if(self.multipleSelection.length == 0){
                    self.$message({
                        message: '请选择要分配的章节',
                        type: 'warning'
                    })
					return
                }
                self.getImageList(false);
                //获取集群镜像
                self.$http.get('/tes/image-allocation/image?cluster=true&notebook=false').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.distributionform.options1 = res.data
                        self.distributionform.options2 = res.data
                        self.distributionform.options3 = res.data
                        self.distributionform.options4 = res.data
                        self.distributionform.options5 = res.data
                        self.distributionform.options6 = res.data
                        self.distributionform.options7 = res.data
                        // 显示分配镜像弹窗
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })

                self.dialogDistributionFormVisible = true
                if(self.multipleSelection.length == 1){
                    // length == 1反显数据
                    self.$http.get("/tes/image-allocation/course/" + self.coursesId+'/'+self.multipleSelection[0]).then(response => {
                        let res = response.data;
                        if (res.code == "200") {
                            if (res.data.allocated) {
                                self.distributionform.experimentType = res.data.type;
                                //获取可视化实验单节点/notebook实验镜像列表
                                if (res.data.type == 2) {
                                    self.getImageList(true);
                                }
                                if (res.data.mode == 1) {
                                    self.distributionform.resource = res.data.mode;
                                    // 伪分布取值
                                    self.distributionform.distributedData.cpuValue = ""+res.data.cpu+"";
                                    self.distributionform.distributedData.ramValue = ""+res.data.ram+"";
                                    // self.distributionform.distributedData.switchValue = res.data.gpu;

                                    self.distributionform.optionsValue0 = [
                                        res.data.image.imageSource,
                                        res.data.image.imageId
                                    ];
                                    self.handleItemChange(self.distributionform.optionsValue0)
                                } else if (res.data.mode == 2) {
                                    self.distributionform.resource = res.data.mode;
                                    // 主节点取值
                                    self.distributionform.nodeMianData.cpuValue = ""+res.data.cpu+"";
                                    self.distributionform.nodeMianData.ramValue = ""+res.data.ram+"";
                                    // self.distributionform.nodeMianData.switchValue = res.data.gpu;

                                    self.distributionform.optionsValue7 = [
                                        res.data.image.imageSource,
                                        res.data.image.imageId
                                    ];
                                    // 从节点镜像配置
                                    self.distributionform.mirrorConfigData.cpuValue = ""+res.data.slaveCpu+"";
                                    self.distributionform.mirrorConfigData.ramValue = ""+res.data.slaveRam+"";
                                    self.distributionform.mirrorConfigData.switchValue = res.data.slaveGpu;
                                    self.distributionform.virtualStepCurrent = res.data.slaveSize;
                                    self.$nextTick(() => {
                                    if(res.data.slaveSize == 1){
                                        self.distributionform.optionsValue1 = [res.data.slaveImages[0].imageSource, res.data.slaveImages[0].imageId]
                                    }else if (res.data.slaveSize == 2) {
                                        self.distributionform.optionsValue1 = [
                                            res.data.slaveImages[0].imageSource,
                                            res.data.slaveImages[0].imageId
                                        ];
                                        self.distributionform.optionsValue2 = [
                                            res.data.slaveImages[1].imageSource,
                                            res.data.slaveImages[1].imageId
                                        ];
                                        } else if (res.data.slaveSize == 4) {
                                        self.distributionform.optionsValue1 = [
                                            res.data.slaveImages[0].imageSource,
                                            res.data.slaveImages[0].imageId
                                        ];
                                        self.distributionform.optionsValue2 = [
                                            res.data.slaveImages[1].imageSource,
                                            res.data.slaveImages[1].imageId
                                        ];
                                        self.distributionform.optionsValue3 = [
                                            res.data.slaveImages[2].imageSource,
                                            res.data.slaveImages[2].imageId
                                        ];
                                        self.distributionform.optionsValue4 = [
                                            res.data.slaveImages[3].imageSource,
                                            res.data.slaveImages[3].imageId
                                        ];
                                        } else if (res.data.slaveSize == 6) {
                                        self.distributionform.optionsValue1 = [
                                            res.data.slaveImages[0].imageSource,
                                            res.data.slaveImages[0].imageId
                                        ];
                                        self.distributionform.optionsValue2 = [
                                            res.data.slaveImages[1].imageSource,
                                            res.data.slaveImages[1].imageId
                                        ];
                                        self.distributionform.optionsValue3 = [
                                            res.data.slaveImages[2].imageSource,
                                            res.data.slaveImages[2].imageId
                                        ];
                                        self.distributionform.optionsValue4 = [
                                            res.data.slaveImages[3].imageSource,
                                            res.data.slaveImages[3].imageId
                                        ];
                                        self.distributionform.optionsValue5 = [
                                            res.data.slaveImages[4].imageSource,
                                            res.data.slaveImages[4].imageId
                                        ];
                                        self.distributionform.optionsValue6 = [
                                            res.data.slaveImages[5].imageSource,
                                            res.data.slaveImages[5].imageId
                                        ];
                                        }
                                    });
                                }
                            }else{
                                self.distributionform.resource = 1
                                self.distributionform.distributedData.cpuValue = ''
                                self.distributionform.distributedData.ramValue = ''
                                // self.distributionform.distributedData.switchValue = false
                                self.distributionform.mirrorConfigData.cpuValue = ''
                                self.distributionform.mirrorConfigData.ramValue = ''
                                self.distributionform.mirrorConfigData.switchValue = false
                                self.distributionform.nodeMianData.cpuValue = ''
                                self.distributionform.nodeMianData.ramValue = ''
                                // self.distributionform.nodeMianData.switchValue = false
                                self.distributionform.optionsValue0 = []
                                self.distributionform.optionsValue1 = []
                                self.distributionform.optionsValue2 = []
                                self.distributionform.optionsValue3 = []
                                self.distributionform.optionsValue4 = []
                                self.distributionform.optionsValue5 = []
                                self.distributionform.optionsValue6 = []
                                self.distributionform.optionsValue7 = []
                                self.distributionform.virtualStepCurrent = 1
                                self.distributionform.distributionData = ''
                            }
                        } else {
                            self.$message.error(res.message);
                        }
                    })
                    .catch(err => {
                        console.log(err);
                    });
                }else{
                    self.distributionform = {
                        // 类型
                        resource: 1,
                        // 实验类型 1 可视化实验 2 notebook实验
                        experimentType:1,
                        // 伪分布数组
                        distributedData: {
                            // cpu配置
                            cpuOptions: [
                                {
                                    value: '1',
                                    label: '1核'
                                },
                                {
                                    value: '2',
                                    label: '2核'
                                },
                                {
                                    value: '4',
                                    label: '4核'
                                },
                                {
                                    value: '6',
                                    label: '6核'
                                },
                                {
                                    value: '8',
                                    label: '8核'
                                },
                                {
                                    value: '10',
                                    label: '10核'
                                }
                            ],
                            cpuValue: '',
                            ramOptions: [
                                {
                                    value: '1',
                                    label: '1G'
                                },
                                {
                                    value: '2',
                                    label: '2G'
                                },
                                {
                                    value: '4',
                                    label: '4G'
                                },
                                {
                                    value: '6',
                                    label: '6G'
                                },
                                {
                                    value: '8',
                                    label: '8G'
                                },
                                {
                                    value: '10',
                                    label: '10G'
                                },
                                {
                                    value: '12',
                                    label: '12G'
                                },
                                {
                                    value: '14',
                                    label: '14G'
                                },
                                {
                                    value: '16',
                                    label: '16G'
                                },
                                {
                                    value: '32',
                                    label: '32G'
                                },
                                {
                                    value: '48',
                                    label: '48G'
                                },
                                {
                                    value: '64',
                                    label: '64G'
                                }
                            ],
                            ramValue: '',
                            // GPU
                            // switchValue: false
                        },
                        // 镜像配置
                        mirrorConfigData: {
                            // cpu配置
                            cpuOptions: [
                                {
                                    value: '1',
                                    label: '1核'
                                },
                                {
                                    value: '2',
                                    label: '2核'
                                },
                                {
                                    value: '4',
                                    label: '4核'
                                },
                                {
                                    value: '6',
                                    label: '6核'
                                },
                                {
                                    value: '8',
                                    label: '8核'
                                },
                                {
                                    value: '10',
                                    label: '10核'
                                }
                            ],
                            cpuValue: '',
                            ramOptions: [
                                {
                                    value: '1',
                                    label: '1G'
                                },
                                {
                                    value: '2',
                                    label: '2G'
                                },
                                {
                                    value: '4',
                                    label: '4G'
                                },
                                {
                                    value: '6',
                                    label: '6G'
                                },
                                {
                                    value: '8',
                                    label: '8G'
                                },
                                {
                                    value: '10',
                                    label: '10G'
                                },
                                {
                                    value: '12',
                                    label: '12G'
                                },
                                {
                                    value: '14',
                                    label: '14G'
                                },
                                {
                                    value: '16',
                                    label: '16G'
                                },
                                {
                                    value: '32',
                                    label: '32G'
                                },
                                {
                                    value: '48',
                                    label: '48G'
                                },
                                {
                                    value: '64',
                                    label: '64G'
                                }
                            ],
                            ramValue: '',
                            // GPU
                            switchValue: false
                        },
                        // 主节点
                        nodeMianData: {
                            // cpu配置
                            cpuOptions: [
                                {
                                    value: '1',
                                    label: '1核'
                                },
                                {
                                    value: '2',
                                    label: '2核'
                                },
                                {
                                    value: '4',
                                    label: '4核'
                                },
                                {
                                    value: '6',
                                    label: '6核'
                                },
                                {
                                    value: '8',
                                    label: '8核'
                                },
                                {
                                    value: '10',
                                    label: '10核'
                                }
                            ],
                            cpuValue: '',
                            ramOptions: [
                                {
                                    value: '1',
                                    label: '1G'
                                },
                                {
                                    value: '2',
                                    label: '2G'
                                },
                                {
                                    value: '4',
                                    label: '4G'
                                },
                                {
                                    value: '6',
                                    label: '6G'
                                },
                                {
                                    value: '8',
                                    label: '8G'
                                },
                                {
                                    value: '10',
                                    label: '10G'
                                },
                                {
                                    value: '12',
                                    label: '12G'
                                },
                                {
                                    value: '14',
                                    label: '14G'
                                },
                                {
                                    value: '16',
                                    label: '16G'
                                },
                                {
                                    value: '32',
                                    label: '32G'
                                },
                                {
                                    value: '48',
                                    label: '48G'
                                },
                                {
                                    value: '64',
                                    label: '64G'
                                }
                            ],
                            ramValue: '',
                            // GPU
                            // switchValue: false
                        },
                        options0: [
                        ],
                        optionsValue0: [],
                        options1: [],
                        optionsValue1: [],
                        options2: [],
                        optionsValue2: [],
                        options3: [],
                        optionsValue3: [],
                        options4: [],
                        optionsValue4: [],
                        options5: [],
                        optionsValue5: [],
                        options6: [],
                        optionsValue6: [],
                        options7: [],
                        optionsValue7: [],
                        virtualStepList: [
                            { value: 1 },
                            { value: 2 }
                        ],
                        virtualStepCurrent: 1,
                        // 镜像列表数据
                        distributionData: ''
                    }
                }
                return

            },
            // 表单提交
            DistributionFormSave(formName, tag){
                // tag标记1.保存 2.保存并跳转实验镜像
                let self = this
                self.$refs[formName].validate((valid) => {
                    if (valid) {
                        let data = {}, slaveImageIdsArr = []
                        data.chapterIds = self.multipleSelection
                        data.mode = self.distributionform.resource
                        data.experimentType = self.distributionform.experimentType
                        if(self.distributionform.resource == 1){
                            data.imageId = self.distributionform.optionsValue0[1] ? self.distributionform.optionsValue0[1] : ''
                            data.cpu = self.distributionform.distributedData.cpuValue
                            data.ram = self.distributionform.distributedData.ramValue
                            // data.gpu = self.distributionform.distributedData.switchValue

                            if (data.imageId == '') {
                                self.$message.error('请选择镜像')
                                return
                            }
                        }else if(self.distributionform.resource == 2){
                            data.imageId = self.distributionform.optionsValue7[1] ? self.distributionform.optionsValue7[1] : ''
                            data.cpu = self.distributionform.nodeMianData.cpuValue
                            data.ram = self.distributionform.nodeMianData.ramValue
                            // data.gpu = self.distributionform.nodeMianData.switchValue
                            data.slaveCpu = self.distributionform.mirrorConfigData.cpuValue
                            data.slaveRam = self.distributionform.mirrorConfigData.ramValue
                            data.slaveGpu = self.distributionform.mirrorConfigData.switchValue

                            if (data.imageId == '') {
                                self.$message.error('请选择主节点镜像')
                                return
                            }
                            if (self.distributionform.virtualStepCurrent == 1) {
                                slaveImageIdsArr.push(self.distributionform.optionsValue1[1])
                                if (self.distributionform.optionsValue1[1] == undefined) {
                                    self.$message.error('请选择从节点1镜像')
                                    return
                                }
                            }else if (self.distributionform.virtualStepCurrent == 2) {
                                slaveImageIdsArr.push(self.distributionform.optionsValue1[1])
                                if (self.distributionform.optionsValue1[1] == undefined) {
                                    self.$message.error('请选择从节点1镜像')
                                    return
                                }
                                slaveImageIdsArr.push(self.distributionform.optionsValue2[1])
                                if (self.distributionform.optionsValue2[1] == undefined) {
                                    self.$message.error('请选择从节点2镜像')
                                    return
                                }
                            }else if (self.distributionform.virtualStepCurrent == 4) {
                                slaveImageIdsArr.push(self.distributionform.optionsValue1[1])
                                if (self.distributionform.optionsValue1[1] == undefined) {
                                    self.$message.error('请选择从节点1镜像')
                                    return
                                }
                                slaveImageIdsArr.push(self.distributionform.optionsValue2[1])
                                if (self.distributionform.optionsValue2[1] == undefined) {
                                    self.$message.error('请选择从节点2镜像')
                                    return
                                }
                                slaveImageIdsArr.push(self.distributionform.optionsValue3[1])
                                if (self.distributionform.optionsValue3[1] == undefined) {
                                    self.$message.error('请选择从节点3镜像')
                                    return
                                }
                                slaveImageIdsArr.push(self.distributionform.optionsValue4[1])
                                if (self.distributionform.optionsValue4[1] == undefined) {
                                    self.$message.error('请选择从节点4镜像')
                                    return
                                }
                            }else if (self.distributionform.virtualStepCurrent == 6) {
                                slaveImageIdsArr.push(self.distributionform.optionsValue1[1])
                                if (self.distributionform.optionsValue1[1] == undefined) {
                                    self.$message.error('请选择从节点1镜像')
                                    return
                                }
                                slaveImageIdsArr.push(self.distributionform.optionsValue2[1])
                                if (self.distributionform.optionsValue2[1] == undefined) {
                                    self.$message.error('请选择从节点2镜像')
                                    return
                                }
                                slaveImageIdsArr.push(self.distributionform.optionsValue3[1])
                                if (self.distributionform.optionsValue3[1] == undefined) {
                                    self.$message.error('请选择从节点3镜像')
                                    return
                                }
                                slaveImageIdsArr.push(self.distributionform.optionsValue4[1])
                                if (self.distributionform.optionsValue4[1] == undefined) {
                                    self.$message.error('请选择从节点4镜像')
                                    return
                                }
                                slaveImageIdsArr.push(self.distributionform.optionsValue5[1])
                                if (self.distributionform.optionsValue5[1] == undefined) {
                                    self.$message.error('请选择从节点5镜像')
                                    return
                                }
                                slaveImageIdsArr.push(self.distributionform.optionsValue6[1])
                                if (self.distributionform.optionsValue6[1] == undefined) {
                                    self.$message.error('请选择从节点6镜像')
                                    return
                                }
                            }
                            data.slaveImageIds = slaveImageIdsArr
                        }
                        const loading = self.$loading({
                            lock: true,
                            text: '镜像分配中',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)'
                        })
                        self.$http.post('/tes/image-allocation/course', data).then(response => {
                            let res = response.data
                            if(res.code == '200'){
                                if(tag == 1){
                                    loading.close()
                                    self.$message({
                                        message: '镜像分配成功',
                                        type: 'success'
                                    })
                                    // 列表初始化
                                    self.InitList()
                                    // 镜像分配弹窗隐藏
                                    self.dialogDistributionFormVisible = false
                                }else{
                                    loading.close()
                                    self.$router.push({
                                        path: '/Teaching/MyCourses/ModifyVirtualMachine'
                                    })
                                }
                            }else{
                                self.$message.error(res.message)
                            }
                        }).catch(err => {
                            console.log(err)
                        })
                    }
                })
            },
            // 下一页
            next(){
                this.$refs.carousel.next();
            },
            // 上一页
            prev(){
                this.$refs.carousel.prev();
            },
            handleItemChange(data) {
                let self = this
                if(data[1]){
                    self.$http.get('/tes/image-allocation/image/'+data[1]).then(response => {
                        let res = response.data
                        if(res.code == '200'){
                            self.distributionform.distributionData = res.data
                        }else{
                            self.$message.error(res.message)
                        }
                    }).catch(err => {
                        console.log(err)
                    })
                }
            },
            getCascaderObj(val,opt) {
                return val.map(function (value, index, array) {
                    for (var itm of opt) {
                        if (itm.value == value) { opt = itm.children; return itm; }
                    }
                    return null;
                });
            }
        }
    }
</script>

<style lang="scss">
    @import "./../../../styles/layout/color_variables";
    //message样式
    .el-message-box{
        border:none;
        .el-message-box__header{
            height: 45px;
            line-height: 45px;
            padding: 0;
            background: #070e28;
            .el-message-box__title{
                line-height: 45px;
                span{
                    font-size: 14px;
                    color: #fff;
                    margin-left: 20px;
                }
            }
            .el-message-box__headerbtn{
                i{
                    color: #fff;
                }
            }
        }
        .el-message-box__btns{
            text-align: center;
            margin-bottom: 24px;
            .el-button{
                border: 1px solid #1277eb;
                height: 32px;
                width: 90px;
                text-align: center;
                vertical-align: middle;
                line-height: 30px;
                color: #1277eb;
                cursor: pointer;
                border-radius: 20px;
                padding: 0 16px;
                font-size: 14px;
                display: inline-block;
                box-sizing: border-box;
                &.el-button--primary{
                    background: #fff;
                    margin-left: 18px;
                }
                &:hover {
                    background: $btn-blue;
                    color: $white;
                }
            }
        }
        &.excel-message{
            width: 490px;
            .el-message-box__content{
                padding: 45px 60px;
                .el-message-box__message{
                    p{
                        font-size: 14px;
                        span{
                            color: #385899;
                        }
                    }
                }
            }
        }
        &.history-message{
            width: 490px;
        }
    }
    .dialog-distribution{
        .el-dialog__body{
            min-height:350px;
        }
        .el-form{
            padding: 0 50px;
            .el-dialog__body{
                position: relative;
            }
            .el-form-item__label{
                width: 95px;
            }
            .el-select{
                .el-input__inner{
                    width: 80px;
                }
            }
            .el-input__icon{
                line-height: 32px;
            }
            .miror-item{
                .el-form-item{
                    width: 305px;
                    .el-select{
                        margin-right: 5px;
                        .el-input__inner{
                            width: 150px;
                        }
                    }
                }
            }
            .config-item{
                .item-config{
                    width: 340px;
                    .el-select{
                        .el-input__inner{
                            width: 110px;
                        }
                    }
                }
                .item-cpu{
                    .el-form-item__error{
                        left: 95px;
                    }
                }
                .el-form-item{
                    width: 305px;
                    .el-select{
                        margin-right: 5px;
                    }
                    &.item-distributed{
                        width: 270px;
                        .el-select{
                            .el-input__inner{
                                width: 180px;
                            }
                        }
                        .el-form-item__error{
                            left: 85px;
                        }
                    }
                    &.item-Gpu{
                        width: 100px;
                        .el-form-item__label{
                            width: 55px;
                        }
                    }
                }
            }
            .form-title{
                font-size: 16px;
                color: #385899;
                width: 85px;
                margin-bottom: 15px;
                text-align: center;
            }
            .el-select{
                .el-input__inner{
                    width: 180px;
                }
            }
            .el-cascader{
                line-height: 32px;
            }
            .item-node{
                .el-form-item{
                    display: inline-block;
                    width: 330px;
                }
            }
        }
        .el-dialog__footer{
            text-align: center;
        }
        .button-style{
            min-width: 90px;
        }
        .el-radio-group{
            .el-radio__inner{
                border-color: #DCDFE6;
            }
            .el-radio{
                width: 80px;
            }
        }
        .virtual-step{
            // width: 288px;
            width: 188px;
            border-bottom: solid 3px #dfdfdf;
            margin-top: 15px;
            margin-left: 80px;
            ul{
                li{
                    float: left;
                    width: 19px;
                    height: 19px;
                    line-height: 19px;
                    color: #fff;
                    font-size: 12px;
                    text-align: center;
                    border-radius: 10px;
                    margin: -9px 0 0 0;
                    background: #d9d9d9;
                    cursor: pointer;
                    &.active-disabled{
                        cursor:not-allowed;
                    }
                    &:first-child{
                        // margin-left: 10%;
                        margin-left: 14%;
                    }
                    &:nth-child(2){
                        margin-left: 29%;
                    }
                    &:last-child{
                        margin-left: 31%;
                    }
                    &.active{
                        background: #1277eb;
                    }
                }
            }
        }
        .distribution-item{
            width: 208px;
            height: 280px;
            border: solid 1px #e8e8e8;
            border-radius: 4px;
            position: absolute;
            right: 55px;
            top: 95px;
           .jx-course-box{
                margin-top: 25px;
                text-align: center;
                img{
                    width: 155px;
                }
                span{
                    display: block;
                    font-size: 14px;
                    color: $title-gray;
                    margin-top: 10px;
                }
            }
            .jx-course-icon{
                position: absolute;
                right: 18px;
                top: -5px;
            }
            .jx-course-text{
                margin-top: 10px;
                margin: 10px 24px 0;
                height: 145px;
                overflow-y: scroll;
                font-size: 12px;
                line-height: 16px;
                color: $table-gray;
                word-wrap: break-word;
                &::-webkit-scrollbar {
                    width: 2px;
                }

                &::-webkit-scrollbar-thumb {
                    background: #6c6c6c;
                }
            }
        }
    }
</style>

<style lang="scss" scoped>
    @import "./../../../styles/layout/color_variables";
    #course-template{
        .btn-group{
            margin: 18px 0 20px;
        }
    }
</style>
